<template>
 <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' style="height:25px;">
  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
  <input class="mui-numbox-input" type="number"  :value='initCount' @change="countChanged" ref="numbox"/>
  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
</template>
<script>
import mui from '../../lib/MUI/js/mui.min.js';
 export default {
   data () {
     return {
     }
   },
   mounted() {
       mui(".mui-numbox").numbox().getValue()
   },
   methods:{
     countChanged() {
      // 数量改变了
      // console.log(this.$refs.numbox.value);
      // 每当数量值改变，则立即把最新的数量同步到 购物车的  store 中，覆盖之前的数量值
      this.$store.commit("updateGoodsInfo", {
        id: this.goodsId,
        count: this.$refs.numbox.value
      });
    }
     
   },
   props: ["initCount","goodsId"], 
  //  watch:{
  //    max: function (newVal, oldVal) {
  //        mui(".mui-numbox").numbox().setOption('max',newVal)
  //       }
  //  }
 
 
 }
</script>

<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;

  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }

  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
  }
}
</style>
